<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :modal="model"
    top="5vh"
    :title="state.dialogTitle"
    :width="width"
  >
    <el-form
      ref="formRef"
      label-width="90px"
      :model="state.formData"
      :rules="state.formRules"
    >
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="分类名称:" prop="catelogName">
            <el-input
              v-model="state.formData.catelogName"
              :maxlength="32"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类状态:" prop="catelogStatus">
            <easy-dict-select
              ref="catelogStatusRef"
              :default-value="state.formData.catelogStatus"
              dict-code="1002"
              show-all="N"
              @change="handleCatelogStatusChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序号:" prop="orderId">
            <el-input-number v-model="state.formData.orderId" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上级分类" style="display: flex">
            <el-input
              v-model="state.formData.pname"
              :disabled="true"
              placeholder="请选择上级分类"
              style="width: 80%; margin-right: 10px"
            >
              <template #append>
                <el-button icon="search" @click="handleCatelogSelector">
                </el-button>
              </template>
            </el-input>
            <el-button
              icon="delete"
              type="danger"
              @click="handleCatelogClear"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="配置表单">
            <el-input
              v-model="state.formData.formName"
              :disabled="true"
              placeholder="请选择配置表单"
              style="width: 80%; margin-right: 10px"
            >
              <template #append>
                <el-button icon="search" @click="handleFormPickeror">
                </el-button>
              </template>
            </el-input>
            <el-button icon="delete" type="danger" @click="handleFormClear" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <ConfigCatelogPicker ref="configCatelogRef" @change="handleCatelogChange" />
    <ConfigFormPicker
      ref="formPickerRef"
      @change="handleFormChange"
      :multiple="false"
    />
    <template #footer>
      <el-button type="warning" icon="circle-close" @click="close">
        取消
      </el-button>
      <el-button
        :disabled="state.readonly"
        type="primary"
        icon="circle-check"
        @click="save"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup anme="ConfigCatelogEdit">
import { useMessage } from "@/hooks/message";
import { addObj, updateObj } from "@/api/admin/system/configcatelog/";
import EasyDictSelect from "@/components/dictSelect.vue";
import ConfigCatelogPicker from "@/components/configCatelogPicker.vue";
import ConfigFormPicker from "@/components/configFormPicker.vue";

const props = defineProps({
  title: {
    type: String,
    default: "参数分类"
  },
  width: {
    type: String,
    default: "40%"
  },
  model: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const formRef = ref(null);
const catelogStatusRef = ref(null);
const configCatelogRef = ref(null);
const formPickerRef = ref(null);

const state = reactive({
  readonly: false,
  operationAdd: false,
  param_val: "",
  param_vals: [],
  formData: {
    id: "",
    pid: "0",
    pname: "无",
    catelogName: "",
    catelogStatus: "0",
    formId: "",
    formName: "",
    orderId: 1
  },
  dialogTitle: props.title,
  formRules: {
    catelogName: [
      { required: true, message: "分类名称不能为空", trigger: "blur" }
    ],
    pid: [{ required: true, message: "请选择上级分类", trigger: "blur" }],
    catelogStatus: [
      { required: true, message: "参数值方式不能为空", trigger: "blur" }
    ]
  },
  dialogVisible: false
});

const show = (row, readonly) => {
  console.log("show", row);
  if (readonly) {
    state.dialogTitle = `${props.title}详情`;
    state.readonly = readonly;
  } else {
    state.readonly = false;
  }
  if (row && row.id) {
    state.dialogTitle = `修改${props.title}`;
    Object.assign(state.formData, row);
  } else {
    state.operationAdd = true;
    state.dialogTitle = `新增${props.title}`;
  }
  console.log("show", state.formData);
  state.dialogVisible = true;
};

const close = () => {
  formRef.value.resetFields();
  state.readonly = false;
  state.operationAdd = false;
  state.formData = {
    id: "",
    pid: "0",
    pname: "无",
    catelogName: "",
    catelogStatus: "0",
    formId: "",
    formName: "",
    orderId: 1
  };
  state.dialogVisible = false;
};

const save = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      const params = {
        id: state.formData.id,
        pid: state.formData.pid,
        catelogName: state.formData.catelogName,
        catelogStatus: state.formData.catelogStatus,
        formId: state.formData.formId,
        orderId: state.formData.orderId
      };
      if (state.operationAdd) {
        addObj(params).then(res => {
          if (res.code && res.code === 200) {
            useMessage().success(res.msg);
            emits("confirm", {});
            close();
          } else {
            useMessage().error(res.msg);
          }
        });
      } else {
        updateObj(params).then(res => {
          if (res.code && res.code === 200) {
            useMessage().success(res.msg);
            emits("confirm", {});
            close();
          } else {
            useMessage().error(res.msg);
          }
        });
      }
    }
  });
};

const handleCatelogSelector = () => {
  configCatelogRef.value.show();
};

const handleCatelogChange = node => {
  state.formData.pid = node.id;
  state.formData.pname = node.text;
};

const handleFormPickeror = val => {
  formPickerRef.value.show();
};

const handleFormChange = row => {
  state.formData.formId = row[0].id;
  state.formData.formName = row[0].formName;
};

const handleCatelogClear = () => {
  state.formData.pid = "0";
  state.formData.pname = "无";
};

const handleFormClear = () => {
  state.formData.formId = "";
  state.formData.formName = "";
};

const handleCatelogStatusChange = val => {
  state.formData.catelogStatus = val;
};

defineExpose({
  show,
  close,
  save
});
</script>

<style lang="scss" scoped></style>
